/*
 * @Author: xuhongling
 * @Date:   2020-11-13 17:04:47
 * @Last Modified by:   xuhongling
 * @Last Modified time: 2024-03-25 16:43:02
 */
// ECharts Option
const setChartOption = (chartData, selectedValue) => {
  const ws:any = [], rzs:any = [];
  for (let i = 0; i < chartData.length; i++) {
    ws.push(chartData[i].volume);
    rzs.push(chartData[i].waterLevel);
  }
  const chartOption = {
    color: ['#20b2aa', '#298def', '#0000ff'],
    title: {
      show: true,
      text: '库容关系曲线',
      left: 'center',
      top: '10',
      textStyle: {
        fontSize: 16,
      },
    },
    tooltip: {
      trigger: 'axis',
      transitionDuration: 0,
      formatter: (params) => {
        const data = params[0].data;
        return '水位：' + data[1] + '</br>' + '蓄水量：' + data[0];
      },
    },
    grid: {
      top: '90',
      // left: '3%',
      left: '5%',
      right: '4%',
      bottom: '30',
      containLabel: true,
    },
    legend: {
      left: 'center',
      top: '44',
      itemWidth: 16,
      itemHeight: 10,
      data: [
        {
          name: selectedValue,
          itemGap: 20,
          left: 'center',
          top: '44',
        },
      ],
    },
    xAxis: {
      type: 'value',
      position: 'left',
      name: '蓄水量(10^5m³)',
      nameLocation: 'center',
      nameGap: 24,
      boundaryGap: false,
      //data: chartData.ws,
      axisLine: {
        lineStyle: {
          type: 'solid',
          color: '#333',
        },
      },
      axisTick: {
        show: true,
        inside: true,
        lineStyle: {
          color: '#999',
        },
      },
      axisLabel: {
        show: true,
        margin: 10,
        color: '#333',
        fontSize: 12,
      },
    },
    yAxis: {
      type: 'value',
      position: 'left',
      name: '水位(m)',
      nameGap: 30, //与轴线间距
      scale: true,
      splitNumber: 5,
      boundaryGap: ['5%', '5%'],
      nameTextStyle: {
        color: '#333',
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: '#333',
        },
      },
      axisLabel: {
        show: true,
        color: '#333',
        fontSize: 12,
      },
      splitLine: {
        show: false,
        lineStyle: {
          type: 'dashed',
          color: '#f4f4f4',
        },
      },
    },
    series: [
      {
        name: selectedValue,
        type: 'line',
        symbol: 'circle',
        symbolSize: 2,
        connectNulls: true, //是否连接空数据
        lineStyle: {
          color: '#20b2aa',
          width: 2,
        },
        //data: chartData.rzs,
      },
    ],
    dataset: {
      source: {
        蓄水量: ws,
        水位: rzs,
      },
    },
  };
  return chartOption;
};

export default setChartOption;
